<template>
  <!--时间线-->
  <div>
    <div class="color-legend">
      <span>
        <i class="color-tab"></i>
        本体
      </span>
      <span>
        <i class="color-tab" style="background:#F34C4E;"></i>
        官方媒体
      </span>
      <span>
        <i class="color-tab" style="background:#FDA42A;"></i>
        主流媒体
      </span>
      <span>
        <i class="color-tab" style="background:#AF86F7;"></i>
        自媒体
      </span>
    </div>
    <div class="time-line-box" id="timeLineBox" @mousedown="move">
      <div
        class="time-line-container"
        id="timeLineContent"
        :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}"
      >
        <div class="time-line-item" v-for="(item,index) in timeLineList" :key="index">
          <div class="website-list">
            <span class="website" v-for="(webName) in item.websiteList" :key="webName.id" :style="{background:clolorList[index%4].hoverColor,color:clolorList[index%4].backgroundColor}">
              {{webName.name}}
            </span>
          </div>
          <span class="dot" :style="{background:clolorList[index%4].backgroundColor}"></span>
          <span class="time">{{item.timestamp}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "timeLine",
  props: ["timeLineList"],
  data() {
    return {
      timeLineWidth: 0,
      maxDrawNum: 0,
      currentOffset: 0,
      clolorList:[
        {
          backgroundColor:'#18a8eb',
          hoverColor:'#effaff'
        },
        {
          backgroundColor:'#f24d4b',
          hoverColor:'#fff3f3'
        },
        {
          backgroundColor:'#ffa52a',
          hoverColor:'#fff6ea'
        },{
          backgroundColor:'#af86f7',
          hoverColor:'#f5f0ff'
        }
      ],
    };
  },
  methods: {
    setContentWidth() {
      var item = document.getElementsByClassName("time-line-item");
      var timeLineContent = document.getElementById("timeLineContent");
      var totalWidth = 0;
      for (var i = 0; i < item.length; i++) {
        totalWidth += item[i].clientWidth;
      }
      timeLineContent.style.width = totalWidth + "px";
    },
    getMaxDrawNum(){
      var timeLineBoxaWidth = document.getElementById("timeLineBox")
        .clientWidth;
      var timeLineContent = document.getElementById("timeLineContent");
      var timeLineContentWidth = timeLineContent.clientWidth;
      this.maxDrawNum = timeLineContentWidth - timeLineBoxaWidth>0?timeLineContentWidth - timeLineBoxaWidth:0;
    },
    move(e) {
      let odiv = e.currentTarget; //获取目标元素
      //算出鼠标相对元素的位置
      let disX1 = e.clientX - odiv.getBoundingClientRect().left;
      document.onselectstart = function () {
        return false;
      };
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
         let disX2 = e.clientX - odiv.getBoundingClientRect().left;
         let moveDistance = disX1 - disX2;
        //绑定元素位置到positionX和positionY上面
        //this.positionY = left;
        if(moveDistance+this.currentOffset < (-this.maxDrawNum)){
          this.currentOffset = -this.maxDrawNum
          return
        }
        if (moveDistance+this.currentOffset > 0) {
          this.currentOffset = 0
          return
        } 
        this.currentOffset =moveDistance+this.currentOffset;

      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
  },
  mounted() {
    this.setContentWidth();
    this.getMaxDrawNum();
  },
};
</script>

<style lang="stylus" scoped>
.time-line-box {
  width: 100%;
  overflow: hidden;
}

.time-line-container {
  width: auto;
  margin: 80px 0px;
  white-space: nowrap;

  .time-line-item {
    display: inline-block;
    padding: 18px 0px 0 0px;
    border-top: 1px solid #e2e6e7;
    max-width: 260px;
    position: relative;
    box-sizing: border-box;
    vertical-align: top;

    .website-list {
      white-space: normal;
    }

    span.website {
      font-size: 14px;
      display: inline-block;
      width: 106px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #effaff;
      color: #0f95d4;
      margin: 0px 10px 10px 10px;
      cursor pointer;
    }

    span.dot {
      display: inline-block;
      width: 9px;
      height: 9px;
      background: #18a8eb;
      border-radius: 100%;
      position: absolute;
      top: 0px;
      left: 47%;
      transform: translate(0, -50%);
    }

    span.time {
      display: inline-block;
      width: 90px;
      font-size: 14px;
      color: #767676;
      position: absolute;
      top: -60px;
      left: 50%;
      transform: translate(-50%, 0);
      text-align: center;
      white-space: normal;
    }
  }
}
.color-legend {
  font-size:14px;
  color:#333;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:10px;
  span {
    display:flex;
    align-items:center;
    margin-right:10px;
  }
  .color-tab {
    width:12px;
    height:12px;
    display:inline-block;
    vertical-align:middle
    background:#1FAFF5;
    margin-right:5px;
    border-radius:2px;
  }
}
</style>